<template>
    <div>
        <Card>
            <p slot="title">{{title}}</p>
            <div slot="extra">
                <Button icon="plus" size="small" type="success" @click="modal=true">添加</Button>
            </div>
            <div class="card-content">
                <Table width="100%" :columns="col" :data="data"></Table>
                <div class="page-layout">
                    <Page :total="100" show-total @on-change="handleChangePage"></Page>
                </div>
            </div>
        </Card>
        <Modal v-model="modal" :title="table.title" @on-cancel="handleCancel('modal','form')">
            <Form ref="form" :model="form" :rules="table.rules" :label-width="80">
                <FormItem label="标题" prop="text">
                    <Input v-model="form.text"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary">添加</Button>
                <Button @click="handleCancel('modal','form')">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import util from "@/libs/util";
export default {
    data() {
        return {
            modal: false,
            table: {
                title: "添加表单",
                rules: {}
            },
            form: {
                text: ""
            },
            col: [
                {
                    title: "标题1",
                    key: "data1"
                },
                {
                    title: "标题1",
                    key: "data2"
                },
                {
                    title: "操作",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {}
                                    }
                                },
                                "修改"
                            ),
                            h(
                                "Poptip",
                                {
                                    props: {
                                        title: "确认删除该条信息?",
                                        confirm: true,
                                        transfer: true
                                    },
                                    on: {
                                        "on-ok": () => {}
                                    }
                                },
                                [
                                    h(
                                        "Button",
                                        {
                                            props: {
                                                type: "error",
                                                size: "small"
                                            }
                                        },
                                        "删除"
                                    )
                                ]
                            )
                        ]);
                    }
                }
            ],
            data: [
                {
                    data1: "123",
                    data2: "456"
                }
            ]
        };
    },
    computed: {
        title(){
            return util.getCurrentTitle(this.$route.name)
        }
    },
    methods: {
        handleCancel(...params) {
            //关闭模态窗
            util.cancelModal(this, ...params);
        },
        handleChangePage() {}
    }
};
</script>

<style scoped>
</style>